<template>
  <view class="layout">
    <view class="title-bar">
      <view class="left-title">
        <view class="flag" />
        <wd-text text="身体素质分析" color="#000000" size="18px" />
      </view>
    </view>
    <view style="width: 100%; height: 200px">
      <l-echart ref="chartRef" />
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onPageScroll } from "@dcloudio/uni-app";
import * as echarts from "echarts";
// 响应式数据
const chartRef = ref(null);

const ecConfig = reactive({
  lazyLoad: true,
});

const radarChart = {
  grid: {
    top: "-5%",
    left: "2%",
    right: "4%",
    bottom: 20,
    containLabel: true,
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: "力量", max: 6500 },
      { name: "耐力", max: 16000 },
      { name: "灵敏", max: 30000 },
      { name: "速度", max: 38000 },
      { name: "柔韧", max: 52000 },
    ],
  },
  series: [
    {
      name: "Budget vs spending",
      type: "radar",
      areaStyle: {
        color: "rgba(0, 147, 255, 0.3)",
      },
      data: [
        {
          value: [5000, 14000, 28000, 26000, 42000],
          symbol: "circle", // 拐点形状
          symbolSize: 6, // 拐点大小
          itemStyle: {
            color: "#0093FF", // 拐点颜色
          },
          lineStyle: {
            color: "#0093FF",
            width: 1,
            type: "solid",
          },
        },
      ],
    },
  ],
};

const echart = ref(null);
onPageScroll((e) => {
  console.log("onPageScroll ", e);
  // 监听页面滚动
  if (echart.value) {
    echart.value.resize(); // 页面滚动时重新渲染图表
  }
});
onMounted(() => {
  console.log("mounted ");
  chartRef.value.init(echarts, (chart) => {
    chart.setOption(radarChart);
    echart.value = chart;
  });
});
onUnmounted(() => {
  if (echart.value) {
    echart.value.dispose();
  }
});
</script>

<style lang="scss" scoped>
.layout {
  width: calc(100% - 60px);
  height: 300px;
  margin: 20px;
  padding: 10px;
  background-color: #ffffff;
  border-radius: 10px;
}
.title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.flag {
  width: 2px;
  height: 11px;
  background: #095aeb;
  margin-right: 10px;
}
.left-title {
  display: flex;
  align-items: center;
}
.flex-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
</style>
